<template>
	<view class="update_box">
		<view class="box">

		</view>
		<view v-if="process == '1'" class="find">
			<image class="findback" src="/static/bg/findba.png" mode=""></image>
			<view class="find_info">
				<view class="find_head">新功能介绍</view>
				<view class="find_content" v-html="updateText">

				</view>
			</view>
			<view class="edition">V{{version}}</view>
			<view class="cancel" @tap="hide">暂不升级</view>
			<view class="update" @tap="goDown">立即升级</view>
			<view class="close" @tap="hide">
				<image src="/static/icon/update-close.png" mode=""></image>
			</view>
		</view>
		<view v-else-if="process == '2'" class="download">
			<image class="downloadback" src="/static/bg/loadba.png" mode=""></image>
			<view class="download_content">
				<view class="process_num">{{loadNum}}%</view>
				<view class="process_line">
					<image class="process_line_bg" src="/static/bg/progress.png" mode=""></image>
					<view :style="{width:(100 - loadNum) + '%'}" class="process_line_white"></view>
					<image :style="{left:loadNum+'%'}" src="/static/bg/rocket.png" class="rocket" mode=""></image>
				</view>
				<view class="process_text">
					{{title}}
				</view>
			</view>
			<view class="close" @tap="hide">
				<image src="/static/icon/update-close.png" mode=""></image>
			</view>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				process: '1',
				loadNum: 0,
				version:uni.getStorageSync('new_version').version,
				title: "新版本正在努力更新，请耐心等待...",
				updateText: uni.getStorageSync('new_version').content
			}
		},
		methods: {
			/**
			 * 去下载
			 */
			goDown() {
				this.process = '2';
				let newVersion = uni.getStorageSync('new_version');
				let newVersionUrl = newVersion.download_address;
				const downloadTask = uni.downloadFile({
					url: newVersionUrl, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log(res);
							this.title = "下载完成";
							let apkPath = res.tempFilePath;
							uni.openDocument({
								filePath: apkPath,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
							
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					// console.log('下载进度' + res.progress);

					this.loadNum = res.progress;


				});
			},
			hide() {
				this.$emit('close');
			}
		},
		mounted() {

		},
		computed: {

		}

	}
</script>

<style scoped lang="scss">
	.update_box {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 10001;
		top: 0;
		left: 0;

		.close {
			position: absolute;
			left: 0;
			right: 0;
			bottom: -85upx;
			margin: 0 auto;
			width: 44upx;
			height: 44upx;

			image {
				float: left;
				width: 100%;
				height: 100%;
			}
		}

		.find {
			position: fixed;
			top: 222upx;
			left: 0;
			width: 560upx;
			height: 826upx;
			right: 0;
			margin: 0 auto;
			z-index: 10002;

			.findback {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.find_info {
				position: absolute;
				top: 497upx;
				left: 32upx;
				width: 496upx;
				height: 206upx;

				.find_head {
					font-size: 32upx;
					line-height: 1;
					color: #333333;
				}

				.find_content {
					width: 100%;
					margin-top: 27upx;
					font-size: 28upx;
					overflow: scroll;
					height: 130upx;
				}
			}

			.update,
			.cancel {
				position: absolute;
				bottom: 31upx;
				width: 210upx;
				text-align: center;
				height: 60upx;
				box-sizing: border-box;
				font-size: 28upx;
				border-radius: 8upx;
				line-height: 60upx;

			}

			.cancel {
				left: 40upx;
				border: solid 1upx #3595f9;
				color: #3595f9;
			}

			.update {
				right: 40upx;
				background-color: #3595f9;
				color: #FFFFFF;
			}

			.edition {
				position: absolute;
				top: 396upx;
				right: 36upx;
				width: 100upx;
				height: 33upx;
				font-size: 24upx;
				color: #3595f9;
				line-height: 36upx;
				text-align: center;
			}

		}

		.download {
			position: fixed;
			top: 248upx;
			left: 0;
			width: 560upx;
			height: 797upx;
			right: 0;
			margin: 0 auto;
			z-index: 10002;

			.downloadback {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}

			.download_content {
				width: 100%;
				height: 269upx;
				position: absolute;
				left: 0;
				bottom: 0;
				box-sizing: border-box;
				padding: 0 30upx;

				.process_num {
					text-align: right;
					color: #65aaf2;
					font-size: 24upx;
					line-height: 1;
				}

				.process_line {
					margin-top: 35upx;
					width: 420upx;
					height: 20upx;
					position: relative;
					border-radius: 10upx;

					.process_line_bg {
						width: 420upx;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						border-radius: 10upx;
					}

					.process_line_white {
						width: 100%;
						height: 100%;
						background: #f8f8f8;
						position: absolute;
						right: 0;
						top: 0;
						border-top-right-radius: 10upx;
						border-bottom-right-radius: 10upx;
					}

					.rocket {
						height: 55upx;
						width: 118upx;
						position: absolute;
						left: 30%;
						top: -17upx;
						transform: translateX(-28upx);
					}
				}

				.process_text {
					margin-top: 90upx;
					color: #999999;
					font-size: 24upx;
					width: 100%;
					line-height: 24upx;
					text-align: center;
				}

			}
		}

	}

	.box {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 10001;
		top: 0;
		left: 0;


	}
</style>
